<template>
  <v-app id="inspire">
    <v-content>
  <v-container>
    <h1 style="text-align: center">Rebuttals to be processed</h1>
    <v-data-iterator
      :items="rebuttals"
    >
      <template v-slot:default="props">
        <v-row>
          <v-col
            cols="6"
            lg="4"
            v-for="item in rebuttals"
            :key="item.index"
          >
            <v-card
              color="blue"
              class="white lighten-5 pa-0"
              v-if="item.status!==0"
            >
              <v-card-title ><v-row><v-col>{{item.title}}</v-col></v-row>
                <v-row>
                  <v-col>
                    <v-btn @click="review(item)"
                    > Review
                    </v-btn>
                  </v-col>
                </v-row>
              </v-card-title>
              <v-divider class="my-4 py-0"></v-divider>
              <v-list
                color="blue"
                dense
                class="white lighten-5 px-0 py-0"
                v-for="(value,name) in item"
                :key="item.index"
              >
                <v-list-item>
                  <v-list-item-content>{{name}} :</v-list-item-content>
                  <v-list-item-content>{{value}}</v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </v-data-iterator>
    <side-bar></side-bar>
  </v-container>
    </v-content>
  </v-app>
</template>

<script>
  import store from '../../store'
  import SideBar from './SideBar'
  export default {
    name: 'RebuttalDashboard',
    components: {SideBar},
    data(){
      const generateRebuttals = _ => {
        const rebuttals = []
        this.$axios.post('/allRebuttalIReceived', store.state.userName)
          .then(resp => {
            if (resp != null) {
              var response = resp.data
              response.forEach((rebuttal, index) => {
                rebuttals.push({
                  // identity : "Author",
                  // contributor : contribution.contributor,
                  title: rebuttal.title,
                  meetingFullName: rebuttal.meetingFullName,
                  contributor: rebuttal.contributor,
                  comments: rebuttal.comments,
                  status: rebuttal.status
                })
              })
              return rebuttals
            } else return null
          })
          .catch(error => {
            console.log(error)
          })
        return rebuttals
      }
      return{
        rebuttals: generateRebuttals()
      }
    },
    methods: {
      review (item) {
        this.$router.push({
          path: '/workspace/review/' + item.meetingFullName,
          query: {
            contributor: item.contributor,
            fileTitle: item.title,
            type:3
            // topics: item.topics
          }
        })
      },
    }
  }
</script>
